import Overlay from 'ol/Overlay';
import './Goverlay.less';

const Goverlay = {

  //默认
  getOverlay_default: function  (id = 'default', position, type, properties = {
    'key': 'value'
  }, offset = [0, 0], positioning = 'center-center') {
    var element = document.createElement('element');
    var innerHTML = `<div class="list-overlay">`;
    for (var key in properties) {
      innerHTML += `<div class="row"><span class="key">${key}：</span><span class="value">${properties[key]}</span></div>`;
    }
    var innerHTML = innerHTML + `</div>`;
    element.innerHTML = innerHTML;
    return new Overlay({
      id: id,
      position: position,
      element: element,
      offset: offset,
      positioning: positioning,
      stopEvent: false,
      insertFirst: false
    })
  },
  getOverlay_click: function  (id = 'default', position, type, properties = {
    'key': 'value'
  }, offset = [0, 0], positioning = 'center-center') {
    var element = document.createElement('element');
    var innerHTML = '<div class="list-overlay"> <div style="height: 10px;">'
      +'<button class="closeOverlay">x</button></div>';
    for (var key in properties) {
      innerHTML += `<div class="row"><span class="key">${key}：</span><span class="value">${properties[key]}</span></div>`;
    }
    var innerHTML = innerHTML + `</div>`;
    element.innerHTML = innerHTML;
    return new Overlay({
      id: id,
      position: position,
      element: element,
      autoPan : true,
      offset: offset,
      positioning: positioning,
      stopEvent: false,
      insertFirst: false
    })
  },
  getBasicOverlay: function(container) {
    return new Overlay({
      id: "default",
      element: container,
      autoPan: true,
      autoPanAnimation: {
        duration: 250
      }
    });
  }
}
export default Goverlay;
